// 思路
// 第一步: 定义颜色 - 变量 $变量名称  #000   variables.scss
$black:black;
$red: red;
$green: green;
$blue: blue;
$orange: orange;
$purple: purple;

// 第二步:定义颜色主题库  - 6套主题   themes.scss
$themes-color:(
    black:(
        color:$black,
        background:$black,
        border:1px solid $black 
    ),
    red:(
        color:$red,
        background:$red,
        border:1px solid $red 
    ),
    green:(
        color:$green,
        background:$green,
        border:1px solid $green 
    ),
    blue:(
        color:$blue,
        background:$blue,
        border:1px solid $blue 
    ),
    orange:(
        color:$orange,
        background:$orange,
        border:1px solid $orange 
    ),
    purple:(
        color:$purple,
        background:$purple,
        border:1px solid $purple 
    ),
);

// 第三步:  .theme-#{color}       each $theme in  $list



/* 
$theme-name  black、red....
$map 小列表   .theme-black{}  .theme-red{} ....
先定义一个空列表  +  map-merge 和新遍历的key:value
$colors 里面放的我们主题库里面定义的属性
solt  =  @content 

 #{".theme-"+$theme-name}  =  .theme-#{$theme-name}

*/

$theme-map: ();
@mixin zhuti() {
    @each $theme-name, $map in $themes-color {
        #{".theme-"+ $theme-name} & {
            @each $key,$value in $map {
                $theme-map: map-merge($theme-map, ($key: $value)) !global;
            }
            @content;
        }
    }
}


@function themed($key) {
    @return map-get($theme-map, $key);
}
.box{
    @include zhuti() {
        color: themed("color");
    }
}

// $colors的属性值  map-keys  
/* @each $theme-name, $theme-value in $themes {
    .themes-#{'' + $theme-name} {
      @each $name, $value in $theme-value {
        #{$name}: $value;
      }
    }
} */




/* 
@mixin name($themes:$themes-color) {
    @each $theme-name,$map in $themes-color{
        // @debug $theme-name,$map;
    
        #{".theme-"+$theme-name}{
            // 取到小括号里面的key:value
            @each $key,$values in $map{
                // @debug $key,$values;
                $colors:map-merge($colors,($key:$values)) !global;
                @content;

               // @debug map-get($colors, $key); 
            }
        }
    } 
}
*/






